<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2><span>Update Css Skills With Js</span class></h2>
    <div class="controls">
        <div class="fields">
            <label for="spacing">spacing:</label>
            <input type="range" min="10" max="200" id="spacing" name="spacing" value="150" data-sizing="px">
            <span id="spacing__res"></span>
        </div>
        <div class="fields">
            <label for="blur">Blur:</label>
            <input type="range" min="10" max="20" id="blur" name="blur" value="55" data-sizing="px">
            <span id="blur__res"></span>
        </div>
        <div class="fields">
            <label for="color__res">Color:</label>
            <input type="color" id="color" name="color" value="#ffc600">
            <span id="color__res"></span>
        </div>
    </div>
    <script>
        const inputs = document.querySelectorAll('.fields input');
        inputs.forEach(function (input) {
            //console.log(inputs);
            input.addEventListener('change', function (event) {
                const res = '#' + this.id + '__res';
                //console.log(res);
                document
                    .querySelector(res)
                    .innerText = this.value + (this.dataset.sizing ? this.dataset.sizing : '');
            })
        })


        // const spacingInput = document.querySelector('#spacing');
        // spacingInput.addEventListener('change', function (event) {
        //     // js 是事件驱动的语言
        //     // 函数有一个指针
        //     // this 在 js 中最重要的基础
        //     // 事件处理函数中，this指向事件发生的对象
        //     // console.log(event.target.value, this);
        //     document.querySelector('#spacing__res').innerText =
        //         this.value + this.dataset.sizing;
        // })
        //const blurInput = document.querySelector('#blur');

    </script>
</body>

</html>